<template>
  <a-form ref="formRef" :model="formState" :rules="rules" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
    <a-form-item ref="username" label="用户名" name="username">
      <a-input disabled v-model:value="formState.username" placeholder="请填写用户名" />
    </a-form-item>
    <a-form-item ref="avatar" label="用户头像" name="avatar">
      <Upload-Image v-model:value="formState.avatar" />
    </a-form-item>
    <a-form-item class="submit-item">
      <a-button type="primary" block @click="handleSubmit">确定</a-button>
    </a-form-item>
  </a-form>
</template>
<script lang="ts" setup>
import { reactive, ref, toRaw } from "vue"
import type { UnwrapRef } from "vue"
import type { Rule } from "ant-design-vue/es/form"
import { useUserStore } from "@/store"
import { updateUser } from "@/api/user/index"
import UploadImage from "@/components/Upload/upload-image.vue"
import { message } from "ant-design-vue"

const formRef = ref()
const userStore = useUserStore()
const formState: UnwrapRef<any> = reactive({
  username: userStore.username,
  avatar: userStore.avatar
})
const rules: Record<string, Rule[]> = {
  username: [{ required: true, message: "请输入用户名名称", trigger: "blur" }]
}

const handleSubmit = () => {
  let values: any = toRaw(formState)
  formRef.value.validate().then(() => {
    Reflect.deleteProperty(values, "username")
    updateUser(userStore.id!, { ...values }).then(() => {
      message.success("修改成功")
    })
  })
}
</script>
<style lang="scss" scoped>
:deep(.ant-form-item-label label) {
  font-size: 12px;
}
.select {
  width: 160px;
}
:deep(.select .ant-select-selector) {
  font-size: 12px;
}
:deep(.submit-item .ant-row) {
  display: flex;
  justify-content: center;
}
</style>
